<template>
    <div>
        <tool-bar nav="" title='router3-test'></tool-bar>

        <kv label="router">
            <el-input type="textarea" v-model="$data.txt1" autosize></el-input>
        </kv>

        <kv label="api">
            <el-input type="textarea" v-model="$data.txt2" autosize></el-input>
        </kv>


        <kv>
            <el-button @click="test">test ⤵</el-button>
            <remark>适用于vue2 + vue-router3的路由匹配规则！</remark>
        </kv>

        <kv>
           <div v-html="$data.result"></div>
        </kv>
    </div>
</template>
<script setup>
/**
 * Created by CodeGenerator
 */
import {pathToRegexp, match, parse, compile} from "path-to-regexp";




defineOptions({
    name: "router3-test",
    inheritAttrs: true,
});

//定义 vue2的this,当前组件
const $self = getCurrentInstance();

//定义 $attrs
const $attrs = useAttrs();



//定义data
const $data = reactive({"txt1":"","txt2":"","result":""});


const $props = defineProps({

});





const list = ref();

//定义事件
const $emit = defineEmits(["update:modelValue","loaded"]);



const test = function() {
    jv.$saveData("txt1",$data.txt1);
    jv.$saveData("txt2",$data.txt2);
    $data.result = "不匹配";
    var keys = [];
    var r = pathToRegexp($data.txt1, keys).exec($data.txt2);
    if (r) {
        var gs = r.slice(1);
        $data.result = "正则表达式： " + r +
            "<br /> 捕获分组: " + JSON.stringify(keys) +
            "<br />分组值： " + JSON.stringify(gs);
    }
};

onMounted( function() {
    jv.$loadData("txt1", v=> $data.txt1 = v );
    jv.$loadData("txt2", v=> $data.txt2 = v );
} )



</script>

<style lang="scss" scoped>

::v-deep(.kv > .k) {
    flex: 1;
}

::v-deep(.kv > .v > :first-child) {
    max-width: unset;
}

.grid {
    position: relative;
    margin-left: 20px !important;
    margin-top: 20px !important;


    ::v-deep(textarea), ::v-deep(.el-col), ::v-deep(.el-textarea) {
        height: 100%;
    }
}

.op_column {
    padding-top: 150px;
    padding-bottom: 150px;
    display: flex;
    flex-wrap: wrap;
    place-content: center;
    align-content: space-around;
    position: relative;
    height: 100%;


    button {
        display: block;
        margin: 10px 6px;
    }

}
</style>